import {CCard} from '@/components/card'
import {IconImg, ParamOfStatus} from '@/components/image'
import {CnBoldSpan, CnNormalSpan} from '@/components/text'
import WaterTarget from '@/components/waterTarget'
import RollerDigital from '@/components/rollerDigital'
import {PropType} from 'vue'
import ParamsBar from '@/components/echarts/paramsBar'
import dayjs, {Dayjs} from 'dayjs'
import {paramStatus2Color} from '@/libs/text2Color'
import {colorLuminance} from '@/libs/neumorphism'

export const WaterOverviewCard = defineComponent({
  props: {
    pageData: {
      type: Object as PropType<SingleDevParams.DevDataAnalyse>,
      required: true
    },
    pageLoading: {
      type: Boolean
    }
  },
  emits: {
    dateRangeChange: (data: [Dayjs | undefined, Dayjs | undefined]): boolean => true
  },
  setup(props, {emit}) {
    const state = reactive({
      activeKey: '3'
    })

    const paramEchartData = computed<[any, any, any]>(() => {
      return [
        props.pageData.checkDataRatioPackList.map(item => item.paramName),
        props.pageData.checkDataRatioPackList.map(item => ({
          name: item.paramName,
          toolTipConentLeftText: item.paramName + '正常占比',
          value: item.normalRatio
        })),
        props.pageData.checkDataRatioPackList.map(item => ({
          name: item.paramName,
          toolTipConentLeftText: item.paramName + '异常占比',
          value: -item.exceptionRatio
        }))
      ]
    })

    watch(
      () => state.activeKey,
      n => {
        switch (n) {
          case '1':
            emit('dateRangeChange', [dayjs(), dayjs()])
            break
          case '2':
            emit('dateRangeChange', [dayjs().subtract(1, 'week'), dayjs()])
            break
          case '3':
            emit('dateRangeChange', [undefined, undefined])
            break
        }
      }
    )

    return () => (
      <CCard class='col-span-2 row-span-2 bg-white rounded-4 h-540' title='水质总览'>
        <div class='mt-20 h-80 flex'>
          <WaterTarget
            class='mr-24 mt-15'
            id='waterTarget'
            showDashed={false}
            borderColor={[
              colorLuminance(paramStatus2Color(props.pageData.checkResult), 0.1),
              colorLuminance(paramStatus2Color(props.pageData.checkResult), 0.2)
            ]}
            radius={25}
            range={(props.pageData.nowStandRatio / 100) * 360}
            borderWidth={3}
          >
            <RollerDigital
              class='text-18'
              style={{
                color: colorLuminance(paramStatus2Color(props.pageData.checkResult), 0.1)
              }}
              endVal={props.pageData.nowStandRatio}
            ></RollerDigital>
          </WaterTarget>
          <div class='mt-15 flex-1 h-full'>
            <div class='mb-6'>
              <CnBoldSpan class='mr-30'>{props.pageData.devName}</CnBoldSpan>
              <CnBoldSpan
                style={{
                  color: paramStatus2Color(props.pageData.checkResult)
                }}
              >
                {props.pageData.checkResult}
              </CnBoldSpan>
            </div>
            <div>
              {props.pageData.paramList.map(item => (
                <ParamOfStatus
                  class='mr-24'
                  name={item.paramName}
                  status={item.paramStatusCode}
                ></ParamOfStatus>
              ))}
            </div>
          </div>
        </div>
        <div class='mt-20'>
          <div class='h-30 flex justify-between items-center'>
            <div>
              <CnNormalSpan class='text-text mr-10'>水质趋势</CnNormalSpan>
              <CnNormalSpan class='text-danger'>
                异常指标&lt;{props.pageData.exceptionRatio}%
              </CnNormalSpan>
            </div>
            <div class='h-full flex items-center'>
              <a-tabs
                class='singleDevParams-tab h-full mr-32'
                v-model={[state.activeKey, 'activeKey']}
              >
                <a-tab-pane
                  key='1'
                  tab={() => (
                    <CnNormalSpan class={[' ', state.activeKey === '1' ? 'text-xText' : '']}>
                      日
                    </CnNormalSpan>
                  )}
                ></a-tab-pane>
                <a-tab-pane
                  key='2'
                  tab={() => (
                    <CnNormalSpan class={[' ', state.activeKey === '2' ? 'text-xText' : '']}>
                      周
                    </CnNormalSpan>
                  )}
                ></a-tab-pane>
                <a-tab-pane
                  key='3'
                  tab={() => (
                    <CnNormalSpan class={[' ', state.activeKey === '3' ? 'text-xText' : '']}>
                      总
                    </CnNormalSpan>
                  )}
                ></a-tab-pane>
              </a-tabs>
              {/* <a-button
                style={{
                  background: '#1758F0'
                }}
              >
                <CnNormalSpan class='text-white'>查看历史</CnNormalSpan>
              </a-button> */}
            </div>
          </div>
          <a-spin spinning={props.pageLoading}>
            <div class='h-330'>
              <ParamsBar
                id='waterAnalyze-lineEchart'
                width={'100%'}
                height={'100%'}
                paramEchartData={paramEchartData.value}
              ></ParamsBar>
            </div>
          </a-spin>
        </div>
      </CCard>
    )
  }
})

export const WaterOverviewCardLoading = defineComponent({
  setup() {
    return () => (
      <CCard
        class='col-span-2 row-span-2 bg-white rounded-4 h-540'
        title='水质总览'
        loading={true}
        skeletonProps={{
          paragraph: {
            rows: 10
          }
        }}
      ></CCard>
    )
  }
})
